<template>
	<view id="app">
		<view class="top">
			<text>{{info.last_found_title}}</text>
		</view>
		<view class="main">
			<image :src="info.avatarurl" mode=""></image>
			<text>{{info.username}}</text>
		</view>
		<view class="foot">
			<text>{{info.last_found_withtitle}}</text>
			<view v-for="item in info.imagesList" :key="item.id">
				<image :src="item.img_url" mode=""></image>
			</view>
			<button id="getBtn">联系同学领取</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:'',
				info:{}
			};
		},
		onLoad(params) {
			const { id } = params
			this.id=id
		},
		async mounted(){
			/* 获取失物招领信息 */
			const {data:res} = await this.$http({
				url:'/lastfound/findAllLastFound'
			})
			if(res.code!=200) return
			/* 通过id找信息 */
			this.info=res.data.find(item=>{
				return item.id==this.id
			})
			console.log(this.info)
		}
	}
</script>

<style lang="less">
	#app {
		padding: 20rpx 30rpx 0rpx 30rpx;
		
		.top{
			margin-bottom: 30rpx;
			text{
				font-size: 42rpx;
			}
		}
		
		.main {
			height: 80rpx;
			margin-bottom: 35rpx;
			
			image {
				height: 80rpx;
				width: 80rpx;
				border-radius: 50%;
				vertical-align:middle;
			}
			
			text{
				margin-left: 15rpx;
				font-size: 27rpx;
			}
		}
		
		.foot{
			
			text{
				color: #717171;
				font-size: 25rpx;
			}
			image{
				height: 440rpx;
				width: 690rpx;
				margin-top: 60rpx;
			}
			#getBtn{
				height: 80rpx;
				width: 690rpx;
				border-radius: 50rpx;
				background-color: #f9cc66;
				color: #252525;
				font-size: 30rpx;
				position: fixed;
				bottom: 45rpx;
				left:30rpx
			}
		}
	}
</style>
